<template>
  <div class="sidebar">
    <el-menu
      :default-active="activeIndex"
      router
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="/admin/article" >
        <i class="el-icon-service"></i>
        <span slot="title">文章管理</span>
      </el-menu-item>
      <el-menu-item index="/admin/activeSections" >
        <i class="el-icon-service"></i>
        <span slot="title">章节管理</span>
      </el-menu-item>
      <el-menu-item index="/admin/articleGroup" >
        <i class="el-icon-service"></i>
        <span slot="title">文章分组</span>
      </el-menu-item>
      <el-menu-item index="/admin/oauthUrls" >
        <i class="el-icon-service"></i>
        <span slot="title">授权地址</span>
      </el-menu-item>
      <el-menu-item index="/superAdmin/active" >
        <i class="el-icon-setting"></i>
        <span slot="title">系统设置</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Sidebar',
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters([
      'sidebar'
    ]),
    isCollapse () {
      return !this.sidebar.opened
    },
    activeIndex () {
      const thisRoutPath = this.$route.path
      if (this.$route.name === 'details') {
        return '/tables/details'
      }
      return thisRoutPath
    }
  },
  methods: {
  }
}
</script>

<style scoped>
  .sidebar {
    background-color: rgb(84, 92, 100);
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 100vh;
    height: 100%;
  }

  .el-menu-vertical-demo {
    min-height: 100vh;
    height: 100%;
  }

  .el-menu-item.is-active,
  .el-submenu.is-active >>> .el-submenu__title {
    background: #484e5c !important;
  }

  .el-submenu .el-menu-item {
    padding-left: 60px !important;
    min-width: auto;
  }
  .el-submenu.is-active .el-menu-item {
    background: #484e5c !important;
  }
  .el-submenu.is-active .el-menu-item.is-active  {
    background: #3a4046 !important;
  }
  .el-submenu .el-menu-item:hover {
    padding-left: 60px !important;
    background: rgb(67, 74, 80) !important;
  }
  .el-menu-item i {
    padding-bottom: 4px;
  }

  .el-submenu__title i {
    padding-bottom: 4px;
  }

  @media all and (max-width: 768px) {
    .el-menu--collapse {
      width: 0;
      overflow: hidden;
    }
  }


</style>
